const path = require('path')
const webpack = require('webpack')// 启用热更新第2步
const htmlWebpackPlugin = require('html-webpack-plugin')
const {VueLoaderPlugin} = require('vue-loader')



// 这个配置文件其实是一个JS文件，通过 Node中的模块操作，向外暴露了一个配置对象。
// webpack是基于node的。在这个文件中可以使用node相关的语法。
// 
// 1. 在命令行切到项目根目录，输入 `webpack` 实现打包将 main.js 打包成 bundle.js
// 2. 每次修改完 main.js代码后，需手动再命令行输入 `webpack`，才可以将修改内容更新到UI页面上。

// 3.为减少这样的情况发生： 使用 webpack-dev-server工具，来实现自动打包编译的功能
// 3.1 安装 webpack-dev-server 
// 在命令行输入： `npm i webpack-dev-server -D`   // 这个命令是在项目中安装这个工具
// 3.2 安装完毕后，这个 webpack-dev-server工具和 webpack命令用法一致
// 3.3 在`package.json`配置文件中， scripts节点下，配置 `"dev": "webpack-dev-server"`
// 3.4 在命令行运行`npm run dev` 

 

// 使用 html-webpack-plugin 插件配置启动页面 -- 在内存中自动生成指定的页面，并把打包好的 bundle.js 追加到该页面中去。
// 1.在项目根命令行下 安装该插件 `npm i html-webpack-plugin -D` 
// 2.在webpack.config.js文件中引入该插件  `const htmlWebpackPlugin = require('html-webpack-plugin')`
// 3.在 devServer: { plugins:[  ] } 节点中，new htmlWebpackPlugin(),配置该插件
// 4.运行项目 `npm run dev`后，该插件会生成模板HTML文件，并在其内部自动引用生成的bundle.js文件。
// mark: 当使用 html-webpack-plugin 之后，我们不再需要手动处理bundle.js的引用路径了，因为这个插件已经帮我们创建了一个合适的 script,并引用了正确的路径。


module.exports = {

    mode: 'development',

    //webpack5.0:  devServer 这个节点，如果不添加的话， npm run dev 后，打开 http://localhost:8080 网页显示 "can not get/"
    devServer: {
        static: {
            directory: path.join(__dirname,'/src') //启动后，打开进入的目录
        },

        //devServer 这是配置 webpack-dev-server 命令参数的第二种形式
        open: true,//自动打开浏览器
        port: 4000,//设置启动时的运行端口
        hot: true,//启用热更新 第1步
    },
    plugins: [// 配置插件的节点
        new webpack.HotModuleReplacementPlugin(), // new 一个热更新的模块对象  // 启用热更新第3步
        new htmlWebpackPlugin({ // 创建一个在内存中生成HTML页面的插件
            template: path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据指定的页面路径，生成内存中的页面
            filename: 'index.html'//指定在内存中自动生成的HTML文件名称
        }),
        new VueLoaderPlugin(),//
    ],
    module: {//这个节点作用： 配置所有第三方模块加载器
        rules: [// 匹配规则; 如果匹配到对应的样式文件类型，在调用loader时，会从配置loader的顺序中从后往前调用
            {test: /\.css$/, use:['style-loader','css-loader']},// 匹配处理 .css 文件的第三方loader规则
            {test:/\.less$/, use:['style-loader','css-loader','less-loader']},// 匹配处理 .less 文件的第三方loader规则
            {test:/\.scss$/, use:['style-loader','css-loader','sass-loader']},// 匹配处理 .scss 文件的第三方loader规则
            


            //webpack5 的默认Asset Module 配置已不再使用上面的loader方式，如需继续使用旧的loader，需要添加配置 `type: 'javascript/auto'`
            {
                test:/\.(jpg|png|gif|bmp|jpeg)$/, 
                use: [
                    {
                        // loader: 'url-loader?limit=39089&name=[hash]-[name].[ext]', //这个写法在webpack5下不起作用。
                        loader: 'url-loader',
                        options: {
                            limit: 39069,// 单位是byte，图片大小如果小于这个值，图片将会被 base64，否则的话，被放到项目根目录下。
                            name: '[name]-[hash:8].[ext]',
                            esModule: false,// 在webpack5下，需关闭 url-loader的es6模块化，使用commonjs解析  ===>> 否则，不设置的话，继续使用 url-loader，将不会显示图片在页面上。
                        },
                    },
                ],
                type: 'javascript/auto'// 如果不设置此项，webpack5 默认不采用 旧的 loader方式
        
            },// 匹配处理 图片 的第三方loader规则

            //使用webpack5匹配字体文件
            {
                test:/\.(ttf|eot|svg|woff|woff2|)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'fonts/[name][ext][query]'
                }
        
            },// 匹配处理 字体文件 的第三方loader规则

            {
                test:/\.vue$/,
                use:{
                    loader: 'vue-loader',
                },
                type:'javascript/auto'
            },

            // {
            //     test: /\.html$/,
            //     loader: 'html-withimg-loader'
            // },// 匹配处理 html 的第三方loader规则

        ],
    },
    resolve: {
        alias: {
            "vue$": "vue/dist/vue.js" //修改 vue被导入时包的路径。 默认导入的路径是 ‘vue/dist/vue.runtime.common.js',这个只有 runtime-only模式。
        }
    },

    // 在配置文件中，需手动配置 入口和出口
    entry: path.join(__dirname, './src/main.js'),// 入口，表示要使用webpack打包哪个文件
    output: {//输出文件的配置
        path: path.join(__dirname, './dist'),// 出口，指定打包好的文件输出到哪个目录中。
        filename: 'bundle.js'// 指定输出的文件的名称
    },

}